<template>
	<!-- 	<view class="order-item" v-if="orderDetail" @click="jump">
		<view class="top-wrapper">
			<view class="order-status-bar">
				<view class="order-number">
					{{orderDetail.order_num}}
				</view>
				<view class="order-status" v-if="orderStatus" :style="{'color':orderStatus.color}">
					{{orderStatus.name}}
				</view>
			</view>
			<view class="goods-detail">
				<view class="goods-detail-main-wrapper">
					<view class="goods-cover-wrapper">
						<image :src="orderDetail.product_images" style="width: 100%;height: 100%;" mode="aspectFill" />
					</view>
					<view class="goods-info-wrapper">
						<view class="goods-name">
							{{orderDetail.product_name}}
						</view>
						<view class="goods-desc">
						</view>
						<view class="goods-price-count-wrapper">
							<view class="goods-count">
								X{{orderDetail.product_num}}
							</view>
							<view class="goods-price">
								<text class="label">共</text>￥{{orderDetail.total_price}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="order-operation-bar">
			<view class="order-createtime">
				{{orderDetail.created_at}}
			</view>
			<view class="operation-btn-wrapper">
				<g-button btn_text="重新支付" :width="140" :height="50" :borderRadius="12" :fontSize="24"
					v-if="orderDetail.pay_status === PAY_STATUS.CANCEL" />
				<g-button btn_text="确认收货" :width="140" :height="50" :borderRadius="12" :fontSize="24"
					v-if="orderDetail.logistics === DELIVER_STATUS.DELIVERED" />
			</view>
		</view>
	</view> -->
	<goodsOrderItem v-if="orderDetail" @click.native="jump" :topText="`订单号${orderDetail.order_num}`"
		:statusLabel="orderStatus.name" :statusColor="orderStatus.color" :statusBgcolor="orderStatus.bgColor"
		:goodsName="orderDetail.product_name" :goodsDesc="orderDetail.dec" :goodsImage="orderDetail.product_images"
		style="margin-bottom: 24rpx;">
		<template v-slot:info-bottom>
			<view class="order-info">
				<view class="goods-price">
					商品数量：{{orderDetail.product_num}}
				</view>
				<view class="total-price">
					<view class="label">
						合计：
					</view>
					<view class="value">
						￥{{orderDetail.total_price}}
					</view>
				</view>
			</view>
		</template>
		<template v-slot:footer>
			<view class="order-footer">
				<view class="order-last-paytime" v-if="orderDetail.pay_status === PAY_STATUS.UNPAY">
					剩余支付时间：
					<uni-countdown color="#FFFFFF" background-color="#00B26A" border-color="#00B26A"
						:day="Math.floor(remainTime / 1000 / 60 / 60 / 24)" :hour="Math.floor(remainTime / 1000 / 60 / 60%24) "
						:minute="Math.floor(remainTime / 1000 / 60 % 60) " :second="Math.floor(remainTime / 1000  % 60)" />
				</view>
				<view class="order-createtime" v-else>
					2023-05-09 12:23:56
				</view>
				<view class="operation-btn-wrapper">
					<g-button btn_text="立即支付" :width="140" :height="50" :borderRadius="12" :fontSize="24"
						v-if="orderDetail.pay_status === PAY_STATUS.UNPAY" @click.stop="toPay"
						:disabled="remainTime<=0" />
					<g-button btn_text="重新下单" :width="140" :height="50" :borderRadius="12" :fontSize="24"
						v-else-if="orderDetail.pay_status === PAY_STATUS.CANCEL" @click.stop="toPlaceOrder" />
					<g-button btn_text="确认收货" :width="140" :height="50" :borderRadius="12" :fontSize="24"
						v-else-if="orderDetail.logistics === DELIVER_STATUS.DELIVERED" @click.stop="confirmReceipt" />
				</view>
			</view>
		</template>
	</goodsOrderItem>
</template>

<script lang="ts" setup>
	import { defineProps, computed, defineEmits } from 'vue';
	import { IOrder } from '@/types/order';
	import global from '@/global';
	import { PAY_STATUS } from '@/enum/pay';
	import { DELIVER_STATUS } from '@/enum/deliver';
	import goodsOrderItem from '@/components/goods_order_item/goodsOrderItem';
	import { ROUTE_TYPE } from '@/enum/router';
	import REST_URL from '@/http/http.restUrl';
	import { useStore } from 'vuex';

	const store = useStore();

	const emit = defineEmits(['updateOrderList']);

	interface IProps {
		orderDetail : IOrder | null,
	}

	const props = withDefaults(defineProps<IProps>(), {
		orderDetail: null,
	})

	const orderStatus = computed(() => {
		if (!props.orderDetail) return null
		if (props.orderDetail.pay_status === PAY_STATUS.PAID) {
			return global.deliverStatusList[props.orderDetail.logistics]
		} else {
			return global.payStatusList[props.orderDetail.pay_status]
		}
	})

	const remainTime = computed(() => {
		if (!props.orderDetail || !props.orderDetail.expiration_time) return ''
		return Number(props.orderDetail.expiration_time) * 1000 - (+new Date());
		// return dayjs().add(2, 'day').valueOf() - +new Date();;
	})




	// console.log(remainTime.value / 1000 / 60 / 60 / 24 + '天')
	// console.log(remainTime.value / 1000 / 60 / 60 % 24 + '小时')
	// console.log(remainTime.value / 1000 / 60 % 60 + '分钟')
	// console.log(remainTime.value / 1000 % 60 + '秒')



	const jump = () => {
		uni.router.route({
			url: '/pages_mall/order_detail/orderDetail',
			params: {
				orderNum: props.orderDetail!.order_num
			}
		})
	}

	const toPay = () => {
		uni.router.route({
			url: '/pages_mall/checkstand/checkstand',
			type: ROUTE_TYPE.REDIRECTTO,
			params: {
				orderNum: props.orderDetail!.order_num,
			}
		})
	}

	const toPlaceOrder = () => {
		uni.router.route({
			url: '/pages_mall/goods_detail/goodsDetail',
			params: {
				id: props.orderDetail!.machine_id
			}
		})
	}

	const confirmReceipt = () => {

		uni.showModal({
			title: '确认收货',
			content: `订单号${props.orderDetail!.order_num}`,
			success: async (res) => {
				if (res.confirm) {
					await uni.http.POST(REST_URL.confirmReceipt, {
						order_num: props.orderDetail!.order_num,
					})
					emit('updateOrderList');
				}
			}
		});


	}
</script>

<style scoped lang="scss">
	@import "./orderItem.scss";
</style>